---
title: Quantity Inputs
description: Quantity input components built with Tailwind CSS v4. These responsive, customizable number inputs are ideal for ecommerce, order forms, and shopping carts. Optimized for accessibility, SEO, and mobile usability.
emoji: ➕
wrapper: h-[200px]
container: p-6 flex justify-center
terms:
  - input
  - quantity
  - ecommerce
components:
  - { title: 'Base with plus and minus buttons', dark: true, plugins: ['@tailwindcss/forms'] }
  - {
      title: 'Base with plus and minus buttons, no spinners in the input',
      dark: true,
      plugins: ['@tailwindcss/forms'],
    }
  - { title: 'Base with plus and minus buttons, no spinners in the input and text
        centered', dark: true, plugins: ['@tailwindcss/forms'] }
  - { title: 'Bordered with plus and minus buttons', dark: true, plugins: ['@tailwindcss/forms'] }
---

# Quantity Input Components

<div class="max-w-prose text-pretty">
  These components were originally part of the eCommerce category but have since moved.
</div>

<p>{frontmatter.description}</p>

<CollectionList componentsData={componentsData} />
